<template >
    <div class="add-area">
      <div class="text">
        <el-icon>
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button @click="showDialog = true">添加</el-button>
      </div>
    </div>
    <el-table :data="TList" border style="width: 100%" cell-class-name="align-c">
    <el-table-column prop="id" label="编号" align="center" width="180px"/>
    <el-table-column prop="name" label="秒杀时间段名称" align="center"/>
    <el-table-column prop="startTime" label="每日开启时间" align="center">
      <template #default="{ row }">
        {{ formateDate(row.startTime) }}
      </template>
    </el-table-column>
    <el-table-column align="center" prop="endTime" label="每日结束时间" >
      <template #default="{ row }">
        {{ formateDate(row.endTime) }}
      </template>
    </el-table-column>
    <el-table-column label="启用" prop="status" align="center">
        <template #default="{ row }">
          <el-switch v-model="row.status" 
          @change="switchStatue(row)"       
          :active-value="1"
          :inactive-value="0"/>
        </template>
      </el-table-column>
    <el-table-column label="操作" align="center"  width="180px">
      <template #default="{ row }">
          <el-button text type="primary" @click="change(row.id)"  size="small">编辑</el-button>
          <el-button text type="primary" @click="del(row.id)"  size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <editSelectSession :show="showDialog" @hide="closeDialog" :id="editId"/>
</template>
<script setup lang="ts">
  import { Search,Tickets } from "@element-plus/icons-vue"
import {getFlashSessionList,delFlashSessionList,SwitchFlashSession} from './api'
import {ref} from 'vue'
import { formateDate } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus';
import editSelectSession from './editSelectSession.vue'

const switchStatue=(row:TimeListModel)=>{
  ElMessageBox.confirm("是否要修改该状态??", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        SwitchFlashSession(row.id!,row.status).then((res)=>{
      if(res.code===200){
        ElMessage.success("修改成功")
      }else{
        row.status= row.status===1?0:1
      }
    }).catch(()=>{
      row.status= row.status===1?0:1
    })
      })
      .catch(() => {
        ElMessage('取消操作')
        row.status= row.status===1?0:1
      });
  }



const editId = ref(0);
  const change = (id: number) => {
    editId.value = id;
    showDialog.value = true;
  }

const showDialog = ref(false);
  const closeDialog = (isReload?: boolean) => {
    showDialog.value = false;
    if (isReload) queryFlashSessionList();
  };

const TList=ref<TimeListModel>()
const queryFlashSessionList=()=>{
  getFlashSessionList().then(res=>{
TList.value=res.data
})
}

const del=(id:number)=>{
  ElMessageBox.confirm("是否要删除该活动?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        delFlashSessionList(id).then((res) => {
          if (res.code === 200) {
            ElMessage.success("删除成功");
            queryFlashSessionList()
          }
        });
      })
      .catch(() => {});
}
queryFlashSessionList()
</script>
<style lang="less" scoped>
.searchj-box {
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;

  .row {
    padding: 20px 0;
    display: flex;

    &:first-child {
      justify-content: space-between;
    }

    &:last-child {
      width: 400px;

      span {
        width: 100px;
      }
    }
  }
}

.page {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
.add-area {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  .text{
    display: flex;
    align-items: center;
    span{
      padding-left: 10px;
    }
  }
}
</style>